<div nz-row nzGutter="16">
    <div nz-col nzSpan="1" style="width: 114px;">
        <label class="line-height-32-prefix">物料编码：</label>
    </div>
    <div nz-col nzSpan="4">
        <input type="text" nz-input placeholder="输入物料编码"/>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">物料名称：</label>
    </div>
    <div nz-col nzSpan="4">
        <input type="text" nz-input placeholder="输入物料名称"/>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">库房：</label>
    </div>
    <div nz-col nzSpan="3">
        <input type="text" nz-input placeholder="输入库房编号"/>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">库区：</label>
    </div>
    <div nz-col nzSpan="3">
        <input type="text" nz-input placeholder="输入库区编号"/>
    </div>
    <div nz-col nzSpan="2">
        <button nz-button nzType="primary">查询</button>
    </div>
</div>
<div nz-row nzGutter="16" class="margin-top-16">
    <div nz-col nzSpan="2" style="width: 114px;">
        <label class="line-height-32-prefix">事务处理时间：</label>
    </div>
    <div nz-col nzSpan="4">
        <nz-range-picker [(ngModel)]="dateRange"></nz-range-picker>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">批次：</label>
    </div>
    <div nz-col nzSpan="4">
        <input type="text" nz-input placeholder="输入批次号"/>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">出入库类型：</label>
    </div>
    <div nz-col nzSpan="3">
        <nz-select [(ngModel)]="selStatusDef" class="width-1000">
            <nz-option nzValue="all" nzLabel="全部"></nz-option>
            <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
            <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
        </nz-select>
    </div>
</div>
<div nz-row>
    <nz-divider></nz-divider>
</div>
<div nz-row>
    <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false">
        <thead>
        <tr>
            <th>单据名称</th>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>出入库类型</th>
            <th>库房-库区</th>
            <th>出库数量</th>
            <th>入库数量</th>
            <th>工作令</th>
            <th>账户别名</th>
            <th>创建时间</th>
            <th>操作人</th>
            <th>审批人</th>
            <th>审批时间</th>
            <th>是否触发ERP</th>
            <!-- <th>Action</th> -->
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data" class="editable-row">
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.address }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.createdate }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.createdate }}</td>
            <td><nz-switch [(ngModel)]="data.istrue"></nz-switch></td>
            <!-- <td>
            <a>Action 一 {{ data.name }}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Delete</a>
            </td> -->
        </tr>
        </tbody>
    </nz-table>
</div>
<div nz-row class="margin-top-16">
    <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="10" nzShowSizeChanger [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> 总共 {{ total }} 条 </ng-template>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzSpan="8">
        <nz-table #batchTable nzTitle="批次信息" [nzData]="batchOfList" [nzFrontPagination]="false">
            <thead>
            <tr>
                <th>批次</th>
                <th>数量</th>
                <!-- <th>Action</th> -->
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of batchTable.data" class="editable-row">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <!-- <td>
                <a>Action 一 {{ data.name }}</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a>Delete</a>
                </td> -->
            </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-col nzSpan="16">
        <nz-table #buyTable nzTitle="采购信息" [nzData]="buyOfList" [nzFrontPagination]="false">
            <thead>
            <tr>
                <th>单据名称</th>
                <th>物料编码</th>
                <th>物料名称</th>
                <th>出入库类型</th>
                <th>库房-库区</th>
                <th>出库数量</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of buyTable.data" class="editable-row">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.address }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.age }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzSpan="8">
        <nz-table #outputTable nzTitle="生产信息" [nzData]="outputOfList" [nzFrontPagination]="false">
            <thead>
            <tr>
                <th>完工任务名称</th>
                <th>完工时间</th>
                <th>投料任务名称</th>
                <th>投料方式</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of outputTable.data" class="editable-row">
                <td>{{ data.address }}</td>
                <td>{{ data.createdate }}</td>
                <td>{{ data.address }}</td>
                <td>{{ data.name }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-col nzSpan="16">
        <nz-table #discoverTable nzTitle="检测信息" [nzData]="discoverList" [nzFrontPagination]="false">
            <thead>
            <tr>
                <th>取样数量</th>
                <th>检测结果</th>
                <th>处理意见</th>
                <th>订单数量</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of discoverTable.data" class="editable-row">
                <td>{{ data.age }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.address }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.address }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>
</div>